<template>
  <div class="bob">
    <div id="login-box">
      <h3 class="login_title">宠派用户登陆</h3>
      <div class="form">
        <div class="item">
          <input type="text" v-model="miZhangHao" placeholder="Username" />
          <input type="password" v-model="miMiMa" placeholder="Password" />
        </div>
      </div>
      <div class="button">
        <router-link to=""
          ><el-button :plain="true" @click="getStudents"
            >出发！GO</el-button
          ></router-link
        >
        <router-link to="zhuce"
          ><el-button :plain="true" class="top"
            >新用户看这里</el-button
          ></router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "dlk",
  setup() {
    let router = useRouter();
    let miZhangHao = ref("");
    let miMiMa = ref("");
    function getStudents() {
      axios
        .get(
          `http://localhost:8080/api/index?miZhangHao=${miZhangHao.value}&miMiMa=${miMiMa.value}`
        )
        .then((res) => {
          if (res.data == "zhangHaoMiMaOk") {
            router.push({
              name: "dynamic",
            });
          } else if (res.data == "zhangHaoMiMaNo") {
            alert("失败");
          }
          console.log(res);
        });
    }
    return {
      miZhangHao,
      miMiMa,
      getStudents,
      router,
    };
  },
  // methods:{
  //           // 连接后端的 【get】 请求时，传参方式
  //           getStudents(){
  //               let _this = this;
  //           axios.get('http://localhost:8080/api/index',{
  //               params:{
  //                   tmiZhangHao:'',
  //                   miMiMa:'',
  //               }
  //           }).then(
  //               response => {
  //                 console.log(miZhangHao);
  //               console.log('请求成功了',response.data);
  //               // alert(response.data)
  //               _this.msg123 = response.data
  //               },
  //               error => {
  //               // console.log('请求失败了',error.message);
  //               alert(error.message)
  //               },
  //           ).catch((error)=>{
  //             console.log('err',error);
  //           })
  //           }

  //       },
};
</script>

<style >
.item input {
  width: 237px;
  height: 34px;
}
.button {
  position: relative;
  top: 25px;
  width: 235px;
  height: 40px;
  left: 24px;
}
.button .top {
  position: absolute;
}
.form {
  position: relative;
  width: 275px;
  height: 80px;
}
.item {
  position: absolute;
  left: 20px;
}
.bob {
  width: 350px;
  border: 1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 53px 35px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  box-sizing: border-box;
}
.login_title {
  text-align: center;
  margin-bottom: 5px;
  color: #505458;
}
</style>

